<template>
  <div class="outer-padding">
    <div class="ds-title pd-bottom--32">角色管理</div>
    <div class="fl pd-bottom--32">
      <a-button type="primary" @click="$router.push(`/system/roledetail`)">添加角色</a-button>
    </div>
    <dynamic-table ref="tableRef" :columns="columns" :get-list-func="loadData" rowKey="id">
      <template #notice="{ record }">
        <p class="text-overflow" style="width: 400px">{{ record.cparagraph }}</p>
      </template>
      <template #role="{ record }">
        {{ record.role }}
        <!-- {{ record.role?.join('，') }} -->
      </template>
      <template #operate="{ record }">
        <span
          class="pointer pdl-12 pdr-12"
          style="border-right: 1px solid #ddd"
          @click="$router.push(`/system/roledetail?id=${record.id}`)"
        >
          <icon-font type="icon-edit"></icon-font>
          编辑
        </span>
        <a-popconfirm title="你确定要删除此条数据吗？" @confirm="del(record.id)">
          <span class="pointer pdl-12">
            <icon-font type="icon-delete"></icon-font>
            删除
          </span>
        </a-popconfirm>
      </template>
    </dynamic-table>
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
  import { DynamicTable, TableQueryHeader } from '@/components/dynamic-table'
  import { useRoute } from 'vue-router'
  import { useStore } from '@/store'
  import { getSystemNoticeList, postDelById, postStopById } from '@/api/system/index'
  import { columns } from './columns'
  import iconFont from '@/components/iconfont/icon-font'

  export default defineComponent({
    name: 'Markcomponent',
    components: {
      DynamicTable,
      iconFont,
    },
    setup() {
      const tableRef = ref<InstanceType<typeof DynamicTable>>()

      const valueDate = ref<moment.Moment[]>([])

      const route = useRoute()

      const store = useStore()

      const state = reactive({
        queryParam: {
          announceValue: null,
        },
      })

      /**
       * @description 加载表格数据
       */
      const loadData = (params) => {
        const myParams = { ...params, ...state.queryParam }
        return getSystemNoticeList(myParams)
      }

      onMounted(async () => {})

      const onSearch = (ev) => {
        console.log(ev)
      }
      // 停用
      const stop = async (ev) => {
        await postStopById({ id: ev })
      }
      // 删除
      const del = async (ev) => {
        await postDelById({ id: ev })
      }

      // tableRef.value?.refreshTableData()

      return {
        ...toRefs(state),
        tableRef,
        onSearch,
        loadData,
        columns,
        stop,
        del,
      }
    },
  })
</script>
